<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
   *{
       margin: 0px;
       padding: 0px;
   }
   #container{
       width: 800px;
       height: 500px;
       margin: 60px auto;
       border: 2px solid deepskyblue;
       position: relative;
       background-color: #ccc;
   }
   h2{
      position: absolute;
         left: 344px;
         top: 20px;
   }
   .box{
       width: 380px;
       height: 40px;
       position: absolute;
       top: 80px;
       left: 232px;
       outline: none;

   }
   .box input[type='text']{
       float: left;
       padding-left: 35px;
       border: 1px solid #ccc;
       border-right: none;
       height: 38px;
       outline: none;

       width: 255px;
   }
   .box input[type='submit']{
    border: none;
    margin-right: 9px;
    cursor: pointer;
       float: right;
       color: white;
       background-color: deepskyblue;
       outline: none;
       height: 40px;
       width: 80px;
   }
   ul{
       position: absolute;
       height: 50px;
       list-style: none;
       top: 120px;
       left: 280px;
       width: 300px;

   }
   ul>li{
       float: left;
       color:#fff;
       margin-left: 20px;
   }
   .second {
       position:absolute;
       width: 700px;
       height: 150px;
       top:154px;
       left: 77px;
   }
   .second>li{
       border-left:1px dotted #fff;
       float: left;
       width: 80px;
       margin-left: 10px;
   }
   .second>li>.tianqi{
       margin-left: 22px;
       height: 50px;
       background-repeat: no-repeat;
       width: 50px;
   }
   .second>li>div{
       height: 80px;
       margin-left: 10px;
       height: 60px;
   }
   .second>li:last-child{
       border-right: 1px dotted #fff;
   }
   .second>li>.third, .second>li>.forth, .second>li>.last{
       margin-left: 20px;
   }
    </style>
</head>

<body>
    <div id ="container"> 
        <h2>天气预报</h2>
        <div class="box"> <input type="text" placeholder="青岛" class=""><input type="submit" value="搜索" class="btn"></div>
          <ul class="first">
              <li>北京</li>
              <li>上海</li>
              <li>广州</li>
              <li>深圳</li>
          </ul>
         <ul class="second">
             <li>
                 <div class="tianqi" style="background-image:url(https://www.mingtai18.com/tianqiapi/skin/pitaya/yun.png);"></div>
                 <div>小雨转大雨</div>
                 <div>南风</div>
                 <div>3级-4级</div>

             </li>
             <li>
                 <div  class="tianqi" style="background-image:url(https://www.mingtai18.com/tianqiapi/skin/pitaya/yu.png);"></div>
                 <div>小雨转大雨</div>
                 <div>南风</div>
                 <div>3级-4级</div>
             </li>
             <li>
                 <div class="tianqi" style="background-image:url(https://www.mingtai18.com/tianqiapi/skin/pitaya/lei.png);"></div>
                 <div>小雨转大雨</div>
                 <div>南风</div>
                 <div>3级-4级</div>
             </li>
             <li>
                 <div  class="tianqi" style="background-image:url(https://www.mingtai18.com/tianqiapi/skin/pitaya/yun.png);"></div>
                 <div>小雨转大雨</div>
                 <div>南风</div>
                 <div>3级-4级</div>
             </li>
             <li>
                 <div  class="tianqi" style="background-image:url(https://www.mingtai18.com/tianqiapi/skin/pitaya/qing.png);"></div>
                 <div>小雨转大雨</div>
                 <div>南风</div>
                 <div>3级-4级</div>
             </li>
             <li>
                <div  class="tianqi" style="background-image:url(https://www.mingtai18.com/tianqiapi/skin/pitaya/yun.png);"></div>
                <div>小雨转大雨</div>
                <div>南风</div>
                <div>3级-4级</div>
            </li>
            <li>
                <div  class="tianqi" style="background-image:url(https://www.mingtai18.com/tianqiapi/skin/pitaya/qing.png);"></div>
                <div>小雨转大雨</div>
                <div>南风</div>
                <div>3级-4级</div>
            </li>
            
         </ul>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
    <script>
        
        var inputEle=document.querySelector('input');
        var second=document.querySelector('.second');
        var btn=document.querySelector('.btn');
           function sendAjax( url ){
            return new Promise( ( resolve, reject ) => {
                let xhr = new XMLHttpRequest();
                xhr.open("get",url);
                xhr.send();
                xhr.onreadystatechange = function(){
                    if( xhr.readyState == 4 ){
                        if( xhr.status == 200 ){
                            resolve( xhr.responseText );
                        }else{
                            reject( xhr );
                        }
                    }
                }
            } )
        }
      
      
        btn.onclick=async function(){
            console.log(inputEle.value);
            try{
                
                let res = JSON.parse(await sendAjax(`https://tianqiapi.com/api?version=v1&appid=15412165&appsecret=RMXJXA3m&city=${inputEle.value}`));
                let shuju=res.data;
             console.log(shuju);
             let str=``;
                shuju.forEach(item=>{
                    str+=` <li>
                 <div class='tianqi' style="background-image:url(https://www.mingtai18.com/tianqiapi/skin/pitaya/${item.wea_img}.png);"></div>
                 <div>${item.day}</div>
                 <div class='third'>${item.date}</div>
                 <div class='forth'>${item.week}</div>
                 <div class='last'>${item.wea}</div>
             </li>`
                })
                console.log(str);
                second.innerHTML=str;
                console.log(second);
            }catch( err ){
                console.log( err );
            }
        }
        $('.first>li').click(function(){
            var liVal=$(this).text();
            console.log(liVal);
            $('.box>input').eq(0).val(liVal);

        })
        document.onselectstart=function(){
            return false;
        }

       


    </script>
</body>

</html>